<template>
  <div class="body">
    <div class="title">主题</div>
    <input type="text" id="text" v-model="title">
    <div class="title">内容</div>
    <div id="toolbar" class="toolbar"></div>
    <div id="editor"></div>
    <button @click="submit()">发送</button>
  </div>
</template>

<script>
import { isLogin } from '@/api/login'
import { sendEmailByAid, sendEmail } from '@/api/society'
import Editor from 'wangeditor'
import 'wangeditor/release/wangEditor.min.css'
var editor = new Editor('#toolbar', '#editor')
export default {
  name: 'SendEmail',
  data () {
    return {
      title: '',
      content: ''
    }
  },
  mounted () {
    editor.customConfig.menus = [
      'head', // 标题
      // 'bold', // 粗体//'italic', // 斜体//'underline', // 下划线//'strikeThrough', // 删除线//'foreColor', // 文字颜色//'backColor', // 背景颜色
      'link', // 插入链接
      // 'list', // 列表
      'justify', // 对齐方式
      // 'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格//'video', // 插入视频//'code', // 插入代码//'quote', // 引用
      'undo', // 撤销
      'redo' // 重复
    ]
    // 上传图片
    editor.customConfig.uploadImgTimeout = 20000
    editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024
    editor.customConfig.uploadImgServer = '/system/image/upload'
    editor.customConfig.uploadFileName = 'image'
    editor.customConfig.withCredentials = true
    editor.customConfig.uploadImgParams = {
      type: 'email'
    }
    editor.customConfig.onchange = (html) => {
      this.content = html
    }
    editor.customConfig.uploadImgHooks = {

      success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      fail: function (xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },
      timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },

      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
      customInsert: function (insertImg, result, editor) {
        console.log(result)
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        var url = result.data.path
        insertImg(url)

        // result 必须是一个 JSON 格式字符串！！！否则报错
      }
    }
    // 自定义上传事件
    editor.customConfig.hideLinkImg = true
    editor.create()
  },
  created () {
    this.isLogin()
  },
  methods: {
    isLogin () {
      isLogin().then(res => {
        if (res.code === 0) {
          alert('请先登录')
          this.$router.push('/login')
        }
      })
    },
    submit () {
      var sid = this.$route.query.sid
      var target = localStorage.getItem('target')
      var param = (window.location.hash).split('#')[1]
      if (param === 'email_activity') {
        sendEmailByAid({
          aid: this.$route.query.aid,
          title: this.title,
          content: this.content
        }).then(res => {
          if (res.code === 1) {
            alert('发送成功')
            this.$router.push('/member_center')
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        sendEmail({
          target: target,
          sid: sid,
          title: this.title,
          content: this.content
        }).then(res => {
          if (res.code === 1) {
            alert('发送成功')
            this.$router.push('/member_center')
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style type="text/css" scoped>
* {
  -webkit-user-select: text;
  margin: 0;
  padding: 0;
}

.body {
  background: rgba(247, 202, 201, 0.42);
  font-family: PingFangSC;
  min-height: 800px;;
}

.toolbar {
  width: 92%;
  margin-left: 4%;
  background: white;
  position: absolute;
  border-radius: 5px 5px 0 0;
}

.editor {
  width: 92%;
  margin-left: 4%;
  padding-top: 30px;
}

#editor p {
  font-size: 16px;
  color: grey;
}

.w-e-text {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px !important;
  background: white;
}
.w-e-text-container {
  margin: 0 auto;
  margin-top: 50px;
  height: 380px;
  background: white;
  width: 92%;
}
input {
  padding-left: 10px;
  line-height: 30px;
  border: none;
  outline: none;
  font-size: 19px;
  width: 89%;
  margin-left: 4%;
  height: 40px;
  border: solid 1px white;
  border-radius: 10px;
}

.title {
  width: 92%;
  margin-left: 4%;
  font-size: 15px;
  padding-left: 4px;
  padding-top: 20px;
  margin-bottom: 20px;
  color: grey;
}

button {
  margin: 40px auto 20px auto;
  width: 70%;
  height: 40px;
  margin-left: 15%;
  border-radius: 30px;
  background: rgb(240, 118, 110);
  background: linear-gradient(to right, rgba(240, 84, 73, 60%),rgba(240, 89, 67, 75%),rgba(237, 56, 99, 70%),rgba(238, 57, 98, 80%),rgba(237, 56, 99, 80%));
  border: none;
  font-size: 20px;
  color: white;
  outline: none;
}
</style>
